<template>
  <section class="login">
    <div class="top" style="color:rgba(255,255,255,0.79);fontSize:22px">您好,欢迎来到湖南IPTV，请登录</div>
    <div class="hello">
      <div class="list userNameBox">
      <i></i>
      <input
        type="text"
        placeholder="账号"
        v-model="username"
        autocomplete="off"
      />
    </div>
    <div class="list passwordBox">
      <i></i>
      <input
        type="password"
        placeholder="密码"
        v-model="password"
        autocomplete="off"
      />
    </div>
    <div class="btnBox">
      <button @click="loginBtn" class="loginBtn">登录</button>
    </div>
    </div>

  </section>
</template>

<script>
// @ is an alias to /src
import { mapActions } from 'vuex';
import { Toast } from 'vant';
export default {
    name: 'login',
    data() {
        return {
            username: '天气真好啊',
            password: '123456789',
            active: 'a'
        };
    },
    components: {},
    created() {},
    mounted() {},
    methods: {
        ...mapActions('login', ['login']),
        loginBtn() {
            if (this.username === '' || this.password === '') {
                Toast({
                    message: '请输入账号或密码',
                    position: 'bottom',
                    duration: 2000
                });
            } else {
                this.$route.query.redirect = '/home';
                this.login({
                    username: this.username,
                    password: this.password,
                    $router: this.$router,
                    $route: this.$route
                });
            }
        }
    }
};
</script>
<style scoped lang="scss">
.hello{
  // background-color: rgba(0,0,0,0.39);
  height: 400px;
  width: 92%;
  margin: auto;
  border-radius: 25px;
  padding-top: 20px;
}
.login {
  background:url('../../assets/hao/image/de4ef1a0518fe96be120da9dbc4c06c.jpg') ;
  background-size: cover;
  background-position:  center ;
  background-color: rgb(196, 195, 181);

  .top {
    @include line-height(345px, 345px);
    font-size: 36px;
    padding-left: 45px;
    text-align: left;
  }
  .list {
    height: 100px;
    margin: 0 45px 22px 45px;
    position: relative;
    input {
      border-radius: 20px;
      width: 100%;
      display: block;
      box-sizing: border-box;
      @include line-height(100px, 100px);
      font-size: 28px;
      border: none;
      padding-left: 70px;
      background-color: rgba(255,255,255,0.86);
    }
    i {
      position: absolute;
      display: block;
      left: 20px;
    }
  }
  .userNameBox {
    i {
      width: 24px;
      top: 34px;
      height: 36px;
      background: url("~assets/phone_ico.png") no-repeat left center;
      background-size: contain;
    }
  }
  .passwordBox {
    i {
      width: 24px;
      top: 34px;
      height: 36px;
      background: url("~assets/pwd_ico.png") no-repeat left center;
      background-size: contain;
    }
  }
  .btnBox {
    margin: 58px 45px 0 45px;
    .loginBtn {
      @include line-height(90px, 90px);
      font-size: 32px;
      border-radius: 90px;
      background: linear-gradient(to right, #f9d191, #f9b490);
      opacity: 0.89;
      border: none;
      display: block;
      width: 100%;
      color: #fff;
    }
  }
}
</style>
